<template>
  <div class="container">
    <div class="time">{{ currentDateTime }}</div>
    <div class="title">大板发电公司双重预防管控平台</div>
    <div class="safeday">安全天数：{{ safeDay }}天</div>
  </div>
</template>
<script>
import { dayjs } from 'element-plus';
export default {
  name: 'HeaderItem',
  data() {
    return {
      currentDateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      begDate: '2020-01-01',
      safeDay: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.currentDateTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.safeDay = dayjs().diff(dayjs(this.begDate), 'day')
    }, 1000)
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100px;
  background: url('@/assets/website/header.png') no-repeat;
  background-size: 100%;
  display: flex;
  justify-content: space-between;
  .time {
    width: 20%;
    display: flex;
    padding-top: 35px;
    justify-content: right;
    float: right;
    align-items: right;
  }
  .safeday {
    width: 20%;
    padding-top: 35px;
    justify-content: left;
  }
  .title {
    width: 60%;
    padding-bottom: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: keep-all;
    font-size: 26px;
    font-weight: normal;
    font-style: normal;
    color: rgb(255, 255, 255);
    font-family: 优设标题黑;
  }
}
</style>
